let images;

//初始化详情页信息
function queryHotelDetail() {

    let hotelId = getQueryVariable("hotelId");

    let fragment = document.createDocumentFragment();

    $.ajax({
        type: "GET",
        url: 'http://bo.huiyibeibei.com/api/mtbb/getHotelDetails?id=' + hotelId,
        success: function (result) {
            if (result.code === 200) {
                let item = result.data;
                /*data.forEach((item) => {*/
                    $('#hotelTitleId').innerText = item.name;
                    $(".hotel-name")[0].innerText = item.name;
                    $(".address")[0].innerText = item.address;
                    $("#hotelArea")[0].innerText = item.area;
                    $("#numOfPeople")[0].innerText = item.numOfPeople;
                    $("#numOfMeet").innerText = item.numOfMeet;
                    $("#price")[0].innerText = item.price;
                    $("#numOfRoom")[0].innerText = item.numOfRoom;
                    $("#numOfPark")[0].innerText = item.numOfPark;
                    $("#decorationTime")[0].innerText = '最近装修：' + item.decorationTime;
                    $("#openingTime")[0].innerText = '开业时间：' + item.openingTime;
                    $("#decorationTimeId")[0].innerText = item.decorationTime;
                    $("#openingTimeId")[0].innerText = item.openingTime;
                    $("#hotelIntroduceId")[0].innerText = item.desc;
                    let hotelImgVos = item.hotelImgVo;
                    images = hotelImgVos;
                    hotelImgVos.forEach((hotelImgVo) => {
                        if (hotelImgVo.partitionName === '会场') {
                            hotelImgVo.homeCityImg.forEach((homeCityImg, index) => {
                                creatHomeCityImg(homeCityImg, fragment, index);
                            });
                        }
                    })
                /*});*/
            }
        }
    });
}

//截取url里面的参数
function getQueryVariable(variable) {
    let query = window.location.search.substring(1);
    let vars = query.split("&");
    for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split("=");
        if (pair[0] === variable) {
            return pair[1];
        }
    }
    return false;
}


function creatHomeCityImg(homeCityImg, fragment, index) {
    //大图初始化
    if (index === 0) {
        let elementById = document.getElementById('J_mainImg');
        elementById.setAttribute('src', homeCityImg.fileUrl);
        elementById.setAttribute('data-src', homeCityImg.fileUrl);
        elementById.setAttribute('data-id', index)
    }


    index = parseInt(index);
    let li = document.createElement('li');
    li.className = 'nav-item';
    li.setAttribute('data-src', homeCityImg.fileUrl);
    li.setAttribute('data-type', homeCityImg.partitionName);
    li.setAttribute('data-id', index)
    if (index === 0) {
        li.className = 'nav-item active';
    }

    //小图绑定点击事件
    li.onclick = function () {
        getMainBySecond(this);
    }

    let img = document.createElement('img');
    img.className = 'select-img lazyload';
    img.setAttribute('data-src', homeCityImg.fileUrl);
    img.src = homeCityImg.fileUrl;
    img.alt = homeCityImg.partitionName;
    li.appendChild(img);
    fragment.appendChild(li);
    document.getElementById('J_imgList1').appendChild(fragment);
}

//点击小图 获取大图
function getMainBySecond(e) {

    let main = document.getElementById('J_mainImg');
    //获取小图LI内的image
    main.setAttribute('src', e.firstElementChild.getAttribute('src'));
    main.setAttribute('data-src', e.firstElementChild.getAttribute('data-src'));
    main.setAttribute('data-id', e.getAttribute('data-id'))

    //小图设置被选中的图标
    let ul = document.getElementById('J_imgList1');
    ul.childNodes.forEach((item) => {
        if (item.tagName === 'li' || item.tagName === 'LI') {
            item.className = 'nav-item';
        }
    })
    $(e).attr('class', 'nav-item active');
}


//主图图片翻页
function next(num) {
    let main = document.getElementById('J_mainImg');
    let index = parseInt(main.getAttribute('data-id'));
    let listImage = findByPartitionName(getPartitionName());
    index = index + num
    let image = listImage[index];
    if (image === undefined || image === '' || image === null) {
        return;
    }
    main.setAttribute('src', image.fileUrl);
    main.setAttribute('data-src', image.fileUrl);
    main.setAttribute('data-id', index);


    //大图翻页时，小图内的被选中框也需要跟着跳动

    //1.清空小图的被选中框
    let ul = document.getElementById('J_imgList1');


    ul.childNodes.forEach((item) => {
        if (item.tagName === 'li' || item.tagName === 'LI') {
            item.className = 'nav-item';
        }
        //2.找到小图被选中的下标
        let dataId = parseInt($(item).attr('data-id'));
        if (dataId === index) {
            item.className = 'nav-item active';
        }
    });
}


//选择隔断时展示的信息
function chooseScene(e) {
    let div = $("#J_imgTableTypes");
    div[0].childNodes.forEach((item) => {
        if (item.tagName === 'li' || item.tagName === 'LI') {
            item.className = 'nav-item';
        }
    })
    $(e).attr('class', 'nav-item active');
    let fragment = document.createDocumentFragment();
    images.forEach((item) => {
        if ($(e)[0].innerText === item.partitionName) {
            item.homeCityImg.forEach((homeCityImg, index) => {
                creatHomeCityImg(homeCityImg, fragment, index);
            })
        }
    })
}


//根据隔断的名称查询所有的图片信息
//返回homeCityImg list
function findByPartitionName(partitionName) {
    let listImage;
    images.forEach((item) => {
        if (partitionName === item.partitionName) {
            listImage = item.homeCityImg;
        }
    });
    return listImage;
}

//获取当前 隔断的名称
function getPartitionName() {
    return document.getElementsByClassName('active')[0].innerText;
}


//小图翻页
function secondNext(num) {
    let li = document.getElementById('J_imgList1').getElementsByClassName('nav-item active');
    let dataId = parseInt(li[0].getAttribute('data-id'));
    let fragment = document.createDocumentFragment();
    let listImage = findByPartitionName(getPartitionName());
    dataId = dataId + num;
    if (listImage.length > num) {
        //首先移除所有的子节点
        while (document.getElementById('J_imgList1').hasChildNodes()) {
            document.getElementById('J_imgList1').removeChild(document.getElementById('J_imgList1').lastChild);
        }
        if ((listImage.length - 1) - dataId > num) {
            listImage.forEach((item, index) => {
                if (index >= dataId) {
                    draw(item, dataId, index, fragment);


                }
            })
        } else {
            dataId = listImage.length - 1;
            for (let i = listImage.length - num; i <= listImage.length - 1; i++) {
                draw(listImage[i], dataId, i, fragment);
            }
        }
    }
}

//小图翻页 上一页
function secondPrev(num) {
    let li = document.getElementById('J_imgList1').getElementsByClassName('nav-item active');
    let dataId = parseInt(li[0].getAttribute('data-id'));
    let fragment = document.createDocumentFragment();
    let listImage = findByPartitionName(getPartitionName());
    dataId = dataId - num;
    if (dataId < 0) dataId = 0;
    if (listImage.length > num) {
        //首先移除所有的子节点
        while (document.getElementById('J_imgList1').hasChildNodes()) {
            document.getElementById('J_imgList1').removeChild(document.getElementById('J_imgList1').lastChild);
        }
        if ((listImage.length - 1) - dataId > num) {
            for (let i = listImage.length - 1; i >= 0; i--) {
                if ((i - 1) >= dataId) {
                    draw(listImage[i], dataId, i - 1, fragment);
                }
            }
        } else {
            listImage.forEach((item, index) => {
                draw(item, 0, index, fragment);
            });
        }
    }
}

//小图翻页
function draw(item, dataId, index, fragment) {
    let li = document.createElement('li');
    li.className = 'nav-item';
    li.setAttribute('data-src', item.fileUrl);
    li.setAttribute('data-type', item.partitionName);
    li.setAttribute('data-id', index)
    if (dataId === index) {
        li.className = 'nav-item active';
        let main = document.getElementById('J_mainImg');
        main.setAttribute('src', item.fileUrl);
        main.setAttribute('data-src', item.fileUrl);
        main.setAttribute('data-id', index);

    }
    //小图绑定点击事件
    li.onclick = function () {
        getMainBySecond(this);
    }
    let img = document.createElement('img');
    img.className = 'select-img lazyload';
    img.setAttribute('data-src', item.fileUrl);
    img.src = item.fileUrl;
    img.alt = item.partitionName;
    li.appendChild(img);
    fragment.appendChild(li);
    document.getElementById('J_imgList1').appendChild(fragment);
}







